<template>
  <div>
     <div class="login_wrap">
           <div class="longi_info">
               <h1>若依管理系统 </h1>
               <el-form ref="loginForm" :rules="rules" style="width: 540px;" :model="formObj">
                  <el-form-item prop="username">
                    <el-input v-model="formObj.username">
                       <template #prepend>
                          <el-icon size="30">  <User /></el-icon>
                       </template>
                    </el-input>
                  </el-form-item> 
                  <el-form-item prop="password">
                    <el-input v-model="formObj.password">
                      <template #prepend>
                           <el-icon size="30">  <Lock /></el-icon>
                       </template>
                    </el-input>
                  </el-form-item> 
                    <el-form-item prop="code">
                      <div class="code_wrap">
                        <el-input v-model="formObj.code">
                          <template #prepend>
                               <el-icon size="30">  <Wallet /></el-icon>
                          </template>
                        </el-input>
                        <!-- 验证码 -->
                        <img @click="getCode" :src="img" alt="">
                    </div>
                  </el-form-item> 
                  <el-form-item>
                    <el-checkbox v-model="rember">记住密码</el-checkbox>
                  </el-form-item>
                  <el-form-item>
                    <el-button @click="toLogin" style="width: 100%;"  type="primary">登录</el-button>
                  </el-form-item>
               </el-form>

           </div>
     </div>
  </div>
</template>
<script setup lang="ts">
  import {getCodeImg,login} from '../../api/login'
  import {User,Lock,Wallet } from '@element-plus/icons-vue'
  import {ref,reactive} from 'vue'
 import type {FormInstance} from 'element-plus'
 import {userStore} from '@/store/index'
 import {useRouter} from 'vue-router'
 let router=useRouter();
 let uStore= userStore();
  let img=ref<string>('') //图片的base64编码


  // 收集表单的数据
  interface Iform{
    username:string,
    password:string,
    code:string,
    uuid:string
  }
  let formObj=reactive<Iform>({
     username:"",//用户名
     password:"",//密码
     code:"", //验证码
     uuid:"" // 验证码的uuid
  })
  let rember=ref(false) // 记住密码

  // 假如是记住密码了 判断localStroage的值
  if(localStorage.getItem("username")){
    formObj.username=localStorage.getItem("username") as string
     formObj.password=localStorage.getItem("password") as string
  }

  // 表单验证
  let rules={
    username:[{required:true, message:"请输入用户名",trigger:"blur"}],
    password:[{required:true, message:"请输入密码",trigger:"blur"}],
    code:[{required:true, message:"验证码必填",trigger:"blur"}]
  }
  // 获取验证码接口
  let getCode=async ()=>{
     let res:any=await getCodeImg();
     console.log(res,"---------")
     formObj.uuid=res.uuid //存储uuid
     img.value="data:image/png;base64,"+res.img //图片的base64编码
  }
  getCode();
 
  let loginForm=ref<FormInstance|null>() //表单组件
  // 登录接口
  let toLogin=async ()=>{
    // 表单验证通过在执行登录接口
    loginForm.value?.validate(async (vali)=>{
       if(vali){
            let res:any=await login(formObj.username,formObj.password,formObj.code,formObj.uuid);
         // 假如记住密码了
         if(rember.value){
          localStorage.setItem("username",formObj.username)
          localStorage.setItem("password",formObj.password)
         }else{
            localStorage.setItem("username","")
            localStorage.setItem("password","")
         }


            console.log(res,"登录接口")
            // 登录成功后 将token 存储到pinia 
            uStore.setToken(res.token)
            // 跳转到layout页面
            router.push("/layout")
       }
    })
  

  }
</script>
<style lang="scss" scoped>
    .login_wrap {
        width: 100vw;
        height: 100vh;
        text-align: center;
     
        background: url(@/assets/images/login-background.jpg) no-repeat;
        background-size: 100% 100%;
        position: relative;
        .longi_info{
          width: 600px;
          height: 440px;
          background: #fff;
          position: absolute;
         padding: 30px;
         box-sizing: border-box;
          top:0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          .el-form-item{
            height: 50px;
            .el-input{
              height: 50px;
            }
          }
        }
    }
      .code_wrap{
        display: flex;
        .el-input{
          width: 350px;
        }
        img{
          width: 180px;
          height: 50px;
          margin-left: 10px;
        }
      }

</style>